<script setup>
import { ref } from 'vue'
import { MdCatalog } from 'md-editor-v3'

const props = defineProps({
  id: {
    type: String,
    default: 'markdown-preview',
  },
})
const id = ref(props.id)
const scrollElement = document.documentElement
</script>

<template>
  <div class="markdown-toc">
    <MdCatalog
      :editorId="id"
      :scrollElement="scrollElement"
      :scrollElementOffsetTop="90"
      :offsetTop="140"
    />
  </div>
</template>

<style scoped lang="scss">
// 目录样式
.markdown-toc {
  padding: 16px 0;
}
:deep(.md-editor-catalog-indicator) {
  background-color: #409eef;
}
:deep(.md-editor-catalog-active > span) {
  color: #409eef;
  font-weight: 600;
}
:deep(.md-editor-catalog-link > span:hover) {
  color: #409eef;
}
</style>
